<template>
  <div>
    <input type="file" id="file" />
    <button @click="open">打开</button>
    <!--  <button @click="print">打印</button> -->
    <span v-show="flag"> {{ index + 1 }}/{{ length }}</span>
    <button @click="firstPage">首页</button>
    <button @click="subIndex">上页</button>
    <button @click="addIndex">下页</button>
    <button @click="lastPage">尾页</button>
    <button @click="rotateTrue">顺时针旋转90度</button>
    <button @click="rotateFalse">逆时针旋转90度</button>
    <button @click="big">放大0.25</button>
    <button @click="small">缩小0.25</button> 
    <div id="container"></div>
  </div>
</template>

<script>
import "../js/html";
import "../js/iconfont";
const g = window.SWOFD;
console.log("下面输出的是g");
console.log(g);
let doc, file, count, name, page;
let index;
const openDoc = async (thisa) => {
  file = document.getElementById("file").files[0];
  doc = await g.open(file);
  count = doc.pageCount;
  thisa.length = count;
  name = doc.name;
  if (!file) {
    alert("没有选择文件");
  } else {
    console.log("有文件");
  }
  paint(0);
};
const paint = async (index, thisa,dpi) => {
  if (doc == "") {
    alert("您还没有选择文档");
  } else {
      /* dpi=thisa.dp */
    page = await doc.pageAt(index);
 /*  alert(thisa.dpi)  */
    await page.paint(document.getElementById("container"), {
        
      dpi: dpi,
      selectText: false,
      rotate: 0,
    });
    thisa.index = index;
  }
};
const rotateDoc = async (thisa) => {
  if (doc == "") {
    alert("您还没有选择文档");
  } else {
    page = await doc.pageAt(thisa.index);
    await page.paint(document.getElementById("container"), {
      dpi: 96,
      selectText: false,
      rotate: thisa.num,
    });
    alert(num);
    /*  page.rotate()=90 */
  }
};
export default {
  name: "HelloWorld",
  data() {
    return {
      index: 0,
      num: 0,
      flag: false,
      length: 0,
      dp:96,
      a:1,
    };
  },
  computed: {},
  methods: {

    open() {
      this.flag = true;
      let thisa = this;
      openDoc(thisa);
    },
    addIndex() {
      if (this.index < count - 1) {
        this.index += 1;
      }
      paint(this.index);
    },
    subIndex() {
      if (this.index > 0) {
        this.index -= 1;
      }
      paint(this.index);
    },
    rotateTrue() {
      this.num += 90;
      let thisa = this;
      rotateDoc(thisa);
    },
    rotateFalse() {
      this.num += 90;
      let thisa = this;
      rotateDoc(this);
    },
    firstPage() {
      this.index = 0;
      paint(0);
    },
    lastPage() {
      let thisa = this;
      paint(count - 1, thisa);
    },
    big(){
        let thisa=this
        paint(this.index,thisa,thisa.dp*1.25)
        this.dp=this.dp*1.25;
    },
    small(){
         let thisa=this
        paint(this.index,thisa,thisa.dp*0.75)
        this.dp=this.dp*0.75
    }
  },
};
</script>


<style scoped>
</style>
